// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 以插件机制形式使用 vuex
Vue.use(Vuex)

// Vuex.Store 构造器选项
const store = new Vuex.Store({
  // state 相当于组件的 data
  state: {
    // 购物车列表数据，初始化的时候从本地存储获取，如果获取不到通过短路运算设置默认空数组
    cartList: uni.getStorageSync('cartList') || [],
  },
  // getters 相当于组件的 computed
  getters: {
    // 根据列表的小选，计算出全选状态
    isAllSelect(state) {
      return state.cartList.every((v) => v.goods_select)
    },
    // 1. 过滤出选中的商品列表
    selectCartList(state) {
      return state.cartList.filter((v) => v.goods_select)
    },
    // 2. 计算选中商品列表的总件数
    selectCartListCount(state, getters) {
      // forEach 写法好理解
      // let sum = 0
      // getters.selectCartList.forEach(item => {
      //   sum += item.goods_count
      // })
      // return sum

      // reduce 累加器写法
      return getters.selectCartList.reduce((sum, item) => {
        // 商品数量的累加
        return sum + item.goods_count
      }, 0)
    },
    // 3. 计算选中商品列表的总钱数
    selectCartListPrice(state, getters) {
      return getters.selectCartList.reduce((sum, item) => {
        // 单价*数量的累加
        return sum + item.goods_price * item.goods_count
      }, 0)
    },
  },
  // mutations 相当于组件的 methods，同步写法
  mutations: {
    // 修改购物车列表
    setCartList(state, payload) {
      // 更新到 vuex 中，用于视图展示
      state.cartList = payload
      // 同步到本地存储
      uni.setStorageSync('cartList', payload)
    },
  },
  // actions 相当于组件的 methods，异步写法
  actions: {},
  // modules 模块
  // modules: {},
})

export default store
